<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { note_info_api } from "@/api/guider_didi";
import { user_follow_api } from "@/package/guider/api/guider_didi";
import { data_api } from "@/api/my";
import { EV_USER } from "@/constant/event";
import { AppData } from "@/utils/app";
import { previewImage } from "@/utils/meida";
import { Account } from "@/utils/account";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import NavSpace from "@/components/nav/space.vue";
import Swipe from "@/components/swipe/swipe.vue";
import SwipeDot from "@/components/swipe/dot.vue";

onLoad((options) => {
  useQuery<{ id: string }>(options as MiniApp.AppLaunchOption, (query) => {
    note_info_api({ id: query.id }).then((resp) => {
      infoData.author_avatar = resp.author_avatar;
      infoData.author_name = resp.author_name;
      infoData.title = resp.title;
      infoData.source_content = resp.source_content.replace(
        /\<img/gi,
        '<img class="detail-info-content2" '
      );
      infoData.date = resp.date;

      imgList.value = resp.img_arr;
      if (resp.img_arr.length > 0) {
        const img = resp.img_arr[0] as any;
        imgHeight.value =
          (img.height / img.width) * AppData.rectData.windowWidth;
      }

      tempData.uid = resp.uid;
      tempData.guiderId = resp.guider_id;

      Account.isLogin && reloadMyData();

      shareOption.title = resp.title;
      shareOption.imageUrl = resp.img_arr[0] || "";
    });

    tempData.id = query.id;

    shareOption.data = { id: query.id };
  });
});

const infoData = reactive({
  author_avatar: "",
  author_name: "",
  title: "",
  source_content: "",
  date: "",
});

const guiderClick = () => {
  tempData.guiderId &&
    Router.navigateTo(
      `/package/guider/pages/detail/index?id=${tempData.guiderId}`
    );
};

const imgIndex = ref(0);
const imgHeight = ref(500);
const imgList = ref<any[]>([]);
const imgClick = () => {
  previewImage(toRaw(imgList.value), toRaw(imgIndex.value));
};

const myData = reactive({ isFollow: false });
const followClick = () => {
  const fn = () => {
    myData.isFollow = !myData.isFollow;
    user_follow_api({ follow_id: tempData.uid, type: 3 }).then(() => {
      uni.$emit(EV_USER, { type: "follow", data: { id: tempData.uid } });
    });
  };

  Account.isLogin
    ? fn()
    : Account.login(() => {
        reloadMyData().then(() => {
          // 没有关注，则关注
          myData.isFollow || fn();
        });
      });
};

const reloadMyData = () => {
  return data_api<{ note_author_follow?: number[] }>({
    includes: "note_author_follow",
  }).then((resp) => {
    myData.isFollow = (resp.note_author_follow || []).includes(
      Number(tempData.uid)
    );
  });
};

const tempData = { id: "", uid: "", guiderId: "" };

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/package/guider/pages/note/detail"
);
</script>

<template>
  <NavBack />
  <NavBar background="#ffffff">
    <view class="detail-nav">
      <image
        class="detail-nav-avatar"
        :src="infoData.author_avatar"
        mode="aspectFill"
        @click="guiderClick"
      />
      <view class="detail-nav-name">{{ infoData.author_name }}</view>

      <view
        class="detail-nav-follow"
        :style="{ opacity: myData.isFollow ? 0.4 : '' }"
        @click="followClick"
      >
        {{ myData.isFollow ? "已" : "" }}关注
      </view>
    </view>
  </NavBar>
  <NavSpace />

  <view
    class="detail-ad"
    v-if="imgList.length !== 0"
    :style="{ height: `${imgHeight}px` }"
    @click="imgClick"
  >
    <Swipe
      v-model="imgIndex"
      :listData="imgList"
      labelKey="img_url"
      autoplay
      mode="aspectFit"
    />
    <view class="detail-ad-dot">
      <SwipeDot
        v-model="imgIndex"
        :total="imgList.length"
        color="#ff7900"
        backgroundColor="#dddddd"
      />
    </view>
  </view>

  <view class="detail-info">
    <view class="detail-info-title">{{ infoData.title }}</view>
    <view class="detail-info-content">
      <rich-text :nodes="infoData.source_content" />
    </view>
    <view class="detail-info-date">{{ infoData.date }}</view>
  </view>
</template>

<style lang="scss">
page {
  // padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
}

.detail-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: 50px;
  padding-right: 30rpx;

  .detail-nav-avatar {
    flex-shrink: 0;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
  }

  .detail-nav-name {
    min-width: 0;
    margin-left: 10rpx;
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-nav-follow {
    flex-shrink: 0;
    width: 104rpx;
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 50rpx;
    text-align: center;
    border-radius: 30rpx;
    background-color: #ff7900;
  }
}

.detail-ad {
  position: relative;
  margin-bottom: 18rpx;

  .detail-ad-dot {
    position: absolute;
    left: 50%;
    bottom: -28rpx;
    transform: translateX(-50%);
  }
}

.detail-info {
  padding: 40rpx 0;

  .detail-info-title {
    margin: 0 30rpx 20rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .detail-info-content {
    margin: 0 30rpx 18rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 52rpx;
    white-space: pre-line;
  }

  .detail-info-content2 {
    display: block;
    width: 100%;
  }

  .detail-info-date {
    padding-left: 30rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
  }
}
</style>